

export const addDate = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addDate', {
        model: {
            defaults: {
                name: 'addDate',
                droppable: true,
                attributes: {
                    class:'xs-date'
                },
                traits: [
                    {
                        type: 'text',  
                        label: '标题',  
                        name: 'title',  
                      },  
                      {  
                        type: 'text',  
                        label: 'id',  
                        name: 'id'
                      },
                ],
                components: [{
                    type: 'div',
                    attributes: {
                        class: 'xs-date-title'
                    },
                    components: [{
                        type:'div',
                        attributes: {
                            class: 'date-year-prev'
                        },
                       content:'<<'
                    },
                    {
                        type:'div',
                        attributes: {
                            class: 'date-prev'
                        },
                       content:'<'
                    },
                    {
                        type:'div',
                        attributes: {
                            class: 'date-time'
                        },
                       content:'2024年 7月'
                    },
                    {
                        type:'div',
                        attributes: {
                            class: 'date-next'
                        },
                       content:'>'
                    },
                    {
                        type:'div',
                        attributes: {
                            class: 'date-year-next'
                        },
                       content:'>>'
                    }],
                },
                {
                    type: 'div',
                    attributes: {
                        class: 'xs-date-week'
                    },
                    components: [{type: 'div',content:'日'},{type: 'div',content:'一'},
                        {type: 'div',content:'二'},{type: 'div',content:'三'},
                        {type: 'div',content:'四'},{type: 'div',content:'五'},
                        {type: 'div',content:'六'},
                    ]
                },
                {
                    type: 'div',
                    attributes: {
                        class: 'xs-date-day'
                    },
                }],
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                    let date_time = thx.querySelector(".date-time");
					let prev = thx.querySelector(".date-prev");
					let next = thx.querySelector(".date-next");
					let prev_year = thx.querySelector(".date-year-prev");
					let next_year = thx.querySelector(".date-year-next");
					let date_day = thx.querySelector(".xs-date-day");

                    // 初始
					let date = new Date() //当前时间

                    function updateTime() {
						let year = date.getFullYear(); //当前年份
						let month = date.getMonth() + 1; //当前月
						month < 10 ? month = "0" + month : month;
						let day = date.getDate(); //当前天 
						day < 10 ? day = "0" + day : day;

						date_day.innerHTML = "";
						date_time.innerText = year + "年 " + month + "月"; //标题时间

						var setDate = new Date(year, month, 0);
						var setDay = setDate.getDate(); //这个月天数
						var setWeek = new Date(year, month - 1, 1).getDay(); //上个月星期几
						var setDayEM = new Date(year, month - 1, 0).getDate(); //上个月天数

						//渲染上个月星期
						setWeek <= 0 ? setWeek = 7 : setWeek;
						for (let i = (setDayEM - setWeek) + 1; i <= setDayEM; i++) {
							let EmptyDiv = document.createElement('div');
							EmptyDiv.innerText = i;
							EmptyDiv.className = "date-disable";
							date_day.appendChild(EmptyDiv);
						}

						// 渲染日期
						for (let i = 1; i <= setDay; i++) {
							let TimeDiv = document.createElement('div');
							TimeDiv.innerText = i;
							TimeDiv.className = "item-time";
							if (i == day) {
								TimeDiv.classList.add("date-active");
							}
							date_day.appendChild(TimeDiv);
						}
						// 渲染尾部
						for (let i = 1; i <= (42 - setWeek - setDay); i++) {
							let DisDiv = document.createElement('div');
							DisDiv.innerText = i;
							DisDiv.className = "date-disable";
							date_day.appendChild(DisDiv);
						}
						itemClick(year,month);
					}

                    updateTime();
					prev.onclick = function() {
						date.setMonth(date.getMonth() - 1);
						updateTime();
					};
					next.onclick = function() {
						date.setMonth(date.getMonth() + 1);
						updateTime();
					};
					prev_year.onclick = function() {
						date.setYear(date.getFullYear() - 1);
						updateTime();
					};
					next_year.onclick = function() {
						date.setYear(date.getFullYear() + 1);
						updateTime();
					};

					function itemClick(year,month) {
						let item_time = thx.querySelectorAll(".item-time");
						for (let i = 0; i < item_time.length; i++) {
							item_time[i].onclick = function() {
								for (let i = 0; i < item_time.length; i++) {
									item_time[i].classList.remove("date-active");
								}
								this.classList.add("date-active");
								console.log(year + "年" + month + "月"+this.innerText+"日");//获取日期
							}
						}
					}
                },
                styles: `
                    .xs-date {
                        color: #606266;
                        border: 1px solid #e4e7ed;
                        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
                        background: #fff;
                        border-radius: 4px;
                        line-height: 30px;
                        width: 300px;
                        min-height: 300px;
                        padding: 10px;
                    }

                    .xs-date-title {
                        display: flex;
                        justify-content: center;
                        text-align: center;
                        cursor: pointer;
                        color: #606266;
                        font-size: 16px;
                    }

                    .date-prev {
                        width: 15%;
                        font-family: cursive;
                    }

                    .date-year-prev {
                        width: 15%;
                        font-family: cursive;
                    }

                    .date-time {
                        width: 40%;
                    }

                    .date-next {
                        width: 15%;
                        font-family: cursive;
                    }

                    .date-year-next {
                        width: 15%;
                        font-family: cursive;
                    }

                    .xs-date-week {
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        margin-top: 15px;
                        padding-bottom: 5px;
                        border-bottom: 1px solid #e4e7ed;
                    }

                    .xs-date-week div {
                        list-style: none;
                        width: calc(100%/7);
                        text-align: center;
                        color: #606266;
                        font-size: 14px;
                    }

                    .xs-date-day {
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        margin-top: 15px;
                    }

                    .xs-date-day div {
                        width: calc(100%/7);
                        height: 40px;
                        text-align: center;
                        color: #606266;
                        font-size: 14px;
                        cursor: pointer;
                    }

                    .date-prev:hover,
                    .date-next:hover,
                    .date-time:hover,
                    .xs-date-day div:hover {
                        color: #409eff;
                    }
                    .date-active {
                        color: #409eff !important;
                    }

                    .date-disable {
                        color: #c0c4cc !important;
                    }
                `},
                init() { 
                    this.addClass(`.date-active {
                        color: #409eff !important;
                    }

                    .date-disable {
                        color: #c0c4cc !important;
                    }`)
                },
        }
    });

    // 注册组件
    editor.BlockManager.add('add-date', {
        label: '日期选择器',
        category: '其他类',
        content: {
            type: 'addDate'
        },
        media:`<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/></svg>`
    });
};